<template>
  <div>
    <h3>发表评论</h3>
    <hr>
    <!-- 内容输入区域 -->
    <textarea placeholder="请输入想BB的内容(别BB太多哦)" maxlength="120" v-model="content"></textarea>
    <!-- 发表评论的按钮 -->
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <!-- 评论列表区域 -->
    <div class="cmt-list">
      <!-- 评论 -->
      <div class="cmt-item" v-for="(item, i) in commentList" :key="i">
        <!-- 评论头部 -->
        <div class="cmt-item-title">第{{ i+1 }}楼 用户: {{ item.user_name }} 发表时间: {{ item.add_time | dateFormat }}</div>
        <!-- 评论内容 -->
        <div class="cmt-item-body">{{ item.content }}</div>
      </div>
    </div>

    <!-- 加载更多按钮 -->
    <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
  </div>
</template>

<script>
/** 导入MintUI组件, 使用弹窗功能 **/
import { Toast } from 'mint-ui';

export default {
  data(){
    return {
      pageNum: 1,  // 当前页码
      commentList: [],  // 评论列表
      content: "" // 评论内容
    }
  },
  created() {
    this.getCommentByPageNum();
  },
  methods: {
    /** 请求评论数据 **/
    async getCommentByPageNum(){
      const { data } = await this.$http.get(
          "/api/getcomments/" + this.newsId + "?pageindex=" + this.pageNum
      );
      if( data.status === 0 )
        /* 将数组拼接 */
        this.commentList = this.commentList.concat(data.message);
      else
        alert("请求失败, 请刷新重试");
    },
    /** 加载更多的评论 **/
    loadMore(){
      /* 页面增加 */
      this.pageNum++;
      /* 继续请求 */
      this.getCommentByPageNum();
    },
    /** 发表评论 **/
    async postComment(){
      /* 判断输入内容是否为空 */
      if( this.content.trim().length <= 0 ) return Toast("评论内容不能为空");
      /* 发送请求, 存储评论内容 */
      const { data } = await this.$http.post(
          "/api/postcomment/" + this.newsId,
          {
            content : this.content
          }
      );
      /* 判断是否请求成功 */
      if( data.status === 0 ) {
        /* 将数据丢到评论数组的开头, 就不再用请求去重新获取列表 */
        this.commentList.unshift({user_name: "匿名用户", add_time: new Date(), content: this.content});
        /* 清空内容数据 */
        this.content = "";
      }else{
        Toast("评论失败, 请重试");
      }
    }
  },
  /* 通过组件传值, 获取新闻对应的评论内容 */
  props: [
      "newsId"
  ]
}
</script>

<style lang="scss" scoped>
  textarea{
    font-size: 14px;
    margin: 0;
  }
 .cmt-list{
   margin-top: 5px;
    .cmt-item{
      line-height: 30px;
      .cmt-item-title{
        font-size: 14px;
        background-color: #ddd;
      }
      .cmt-item-body{
        font-size: 13px;
        text-indent: 2em;
      }
    }
 }
</style>